<template>
	<view class="customer-coupon-item">
		<view class="customer-coupon-item-context">
			<view class="zichan-container__header">
				<text style="margin-right: 20rpx;">{{ detailInfo.CustomerInfo.NickName }}</text>
				<text>({{ detailInfo.CustomerInfo.UserNumber }})</text>
			</view>
			<view class="zichan-container__bottom">
				<view class="zichan-container__bottom-item">
					<view class="title">优惠券名称</view>
					<view>{{ detailInfo.Name }}</view>
				</view>
				<view class="zichan-container__bottom-item">
					<view class="title">优惠券类型</view>
					<view>{{ detailInfo.TypeName }}</view>
				</view>
				<view class="zichan-container__bottom-item">
					<view class="title">优惠券金额</view>
					<view>{{ detailInfo.Amount }}元</view>
				</view>
				<view class="zichan-container__bottom-item">
					<view class="title">核销门店</view>
					<view>{{ detailInfo.StoreName }}</view>
				</view>
				<view class="zichan-container__bottom-item">
					<view class="title">核销方式</view>
					<view>{{ detailInfo.CustomerCouponUsingWayName }}</view>
				</view>
				<view class="zichan-container__bottom-item">
					<view class="title">核销时间</view>
					<view>{{ detailInfo.UsingTimeStr }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { errorToShow } from '@/config/common.js';
export default {
	components: {},
	props: {
		detailInfo: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.customer-coupon-item {
	margin-bottom: 30rpx;
	box-shadow: 0rpx 4rpx 8rpx rgba(68, 68, 68, 0.16);
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 0 30rpx;
	&-context {
		height: 100%;
		width: 100%;
		color: $main-text-color-gray-33;
		.line {
			height: 2rpx;
			width: 100%;
			background-color: $main-line-color-grid;
		}
	}
}

.zichan-container {
	margin-bottom: 20rpx;
	font-size: 30rpx;
	&__header {
		display: flex;
		align-items: center;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}
	&__bottom {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
}
.zichan-container__bottom-item {
	display: flex;
	margin-bottom: 14rpx;
	.title {
		color: $main-text-color-gray-black;
	}
}
.zichan-container__bottom-item:first-child {
	width: 450rpx;
}

.zichan-container__bottom .zichan-container__bottom-item .title::after {
	content: '：';
}
</style>
